<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/easycommon.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>流转详细信息</title>
    <meta charset="utf-8">
    <style>
    	html, body{ margin:0; height:100%; }
    	table{font-size:18px}
    	.input{width:250px;margin:4px;height:35px;border: 1px solid #ccc;font-size:18px;border-radius:4px}
    	label{margin:4px}		
    	.btn{width:100px;height:35px;border-radius:4px;background:#6CAEF5;font-size:18px;margin:15px}
		a{
			text-decoration:none;
		}
    </style>
      	<script type="text/javascript" src="${basepath}/assets/ztree/jquery.ztree.all-3.5.js"></script>
  		<link rel="stylesheet" type="text/css" href="${basepath}/assets/ztree/zTreeStyle.css" />
    <script>
	var transgrid;  	
	var datagrid; //定义全局变量datagrid      
    var data; //定义全局变量datagrid
	var selectedTaskRow;
    var editRow;
    $(function(){
		//任务树形
        transgrid = $('#trans').treegrid({
    		rownumbers:true,
    		singleSelect:true,
    		pagination:true,
    		fit: true, //datagrid自适应宽度
            fitColumn: true, //列自适应宽度
            striped: true, //行背景交换
            nowap: false, //列内容多时自动折至第二行
            border: false,
            idField: 'id', //主键
            width:350,
            height:'98%',
            method:'get',
            treeField: 'title',
    		url:"${path}/tasktrans/transInfoList?taskID=${taskID}",
            columns: [[
                     //  {field: '_operate', title: '操作', width: 250, formatter: formatOper},
                       {field: 'title', title: '任务标题', width: 150},
                       {field: 'content', title: '任务内容', width: 150},
                       {field: 'goal', title: '目标', width: 150},
                       {field: 'taskTypeName', title: '任务类型', width: 80},
                       {field: 'taskLevelName', title: '任务等级', width: 80},
                       {field: 'tablebaseName', title: '基础模板', width: 80},
                       {field: 'createdtimeYMD', title: '创建时间', width: 100},
                       {field: 'beginTime', title: '开始时间', width: 100},
                       {field: 'endTime', title: '结束时间', width: 100},
                       {field: 'taskStatusName', title: '任务状态', width: 80},
                       {field: 'note', title: '备注', width: 250}
                     ]] ,
            onClickRow:function (rowData) { 
            	//console.log(rowData);
				selectedTaskRow = rowData;//选中的任务行
            	datagrid.datagrid('load',{
             		taskID: rowData.id
            	}); 
            } 
    	})

		//流转处理人
        datagrid = $('#baseType').datagrid({
    		rownumbers:true,
    		singleSelect:true,
    		pagination:true,
    		fit: true, //datagrid自适应宽度
            fitColumn: true, //列自适应宽度
            striped: true, //行背景交换
            nowap: false, //列内容多时自动折至第二行
            border: false,
            idField: 'id', //主键
            width:350,
            height:'98%',
            method:'get',
    		url:"${path}/tasktrans/transDetail",
    		toolbar: [
    		             { text: '保存', iconCls: 'icon-save', handler: function () {
    		                 //保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
    		                 datagrid.datagrid("endEdit", editRow);
    		             }
    		             }, '-',
    		             { text: '取消编辑', iconCls: 'icon-redo', handler: function () {
    		                 //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
    		                 editRow = undefined;
    		                 datagrid.datagrid("rejectChanges");
    		                 datagrid.datagrid("unselectAll");
    		             	}
    		             }    		           
    		           ],
    		columns:[[
    		          {field: 'userName', title: '接收人', width: 100, formatter: formatOper},
    		          {field: 'deptName', title: '部门', width: 120},
    		          {field: 'time', title: '下发时间', width: 100},
    		          {field: 'statusName', title: '流转状态', width: 80},
    		          {field: 'note', title: '备注', width: 250},
    		          {field: 'sort', title: '排序', width: 30,editor:{ type: 'numberbox',options: { required: true}}}
    			]],
            onDblClickRow: function (rowIndex, rowData) {
                //双击开启编辑行h
                    if (editRow != undefined) {
                        datagrid.datagrid("endEdit", editRow);
                        editRow=undefined;
                    }
                    if (editRow == undefined) {
                     	datagrid.datagrid("beginEdit", rowIndex);
                        editRow = rowIndex;  
                    }
                },   		
            onAfterEdit: function (rowIndex, rowData, changes) {
                //endEdit该方法触发此事件
                console.info(rowData);
                editRow = undefined;
                console.info(changes);  
                
                var data={'id':rowData.id,'sort':rowData.sort}
                
               // var taskUser=JSON.stringify(rowData);
                
                if(rowData != null&&!$.isEmptyObject(changes)){
         			$.ajax({
           			 	url: "${path}/tasktrans/updateTaskUser",    //请求的url地址
           			 	dataType: "json",   //返回格式为json
           			 	async: true, //请求是否异步，默认为异步，这也是ajax重要特性
           			 	data: data,//{ "courseTextbook":courseTextbook },    //参数值
/*            			 	contentType:'application/json', */
           			 	//type: "jsonp",   //请求方式
           			 	success: function(req) {
           			 		if(req.status=='1'){
           			 			datagrid.datagrid("reload");	
           			 		}else{
           			 			$.messager.alert("提示", req.msg,"info"); 
           			 		}                			 		
        				},
        				error:function(req) {
        					console.log(req);
        					$.messager.alert("警告", "修改出错","error"); 
        				}
        			})
            	
                }
  
            },
    	})

    })

	function formatOper(val, row, index) {
		return '<a href="#" onclick="showUserData(' + index + ')">'+row.userName+'</a>   ';
	}

	function showUserData(index){
		$('#baseType').datagrid('selectRow', index);
		var row = $('#baseType').datagrid('getSelected');
		if(selectedTaskRow){
			plantableData(row.id,selectedTaskRow.tableType);
		}
	}

	var layIndex;
	//查看添加计划字段
	function plantableData(taskUserID,tableType){
		var url = "/404";
		if(tableType=='1'){
			url = "${path}/tasktrans/dataIndexShow?isPlan=1&taskUserID="+taskUserID;
		}else if(tableType=='0'){
			url = "${path}/fetask/userValueShow?feTaskUserid="+taskUserID;
		}
		//console.log(url);
		if (taskUserID) {
			layIndex = layer.open({
				title:"扩展字段",
				type: 2,
				fix: false,
				maxmin: true,
				area: ['950px', '670px'],
				content: url,
				cancel: function(index){

				}
			});
		} else {
			$.messager.alert("提示", "请先选择一条记录", "error");
		}
	}
    	
    </script>
</head>
<body>

	<div id="gridlayout" class="easyui-layout" style="width:100%;height:100%;">
		<div data-options="region:'west',split:true"  style="width:60%;">
            <table id="trans" title="任务" class="easyui-datagrid" style="width:850px"
					singleSelect="true" iconCls="icon-save">
			</table>
          </div>
		<div data-options="region:'center'"  style="width:40%;">
		 	<table id="baseType" title="任务流转" class="easyui-datagrid" style="width:850px"
					singleSelect="true" iconCls="icon-save">
			</table>
		</div>
		<!--<div data-options="region:'east',split:true" style="width:30%;">
		 	<table id="data" title="任务指标" class="easyui-datagrid" style="width:850px"
					singleSelect="true" iconCls="icon-save">
			</table> 
		</div>-->
	</div>


</body>
</html>
